<template>
  <div>App</div>
  <h2>{{ message }}</h2>
  <button @click="changeMessage">修改</button>
  <show-info name="inzv" :age="18" @btn-click="appClick" ref="showInfoRef"></show-info>
  <show-info></show-info>
  <show-info ></show-info>

</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import ShowInfo from './ShowInfo.vue'

//1.定义数据
const message = ref('Hello inzv ')

// 2、定义函数
function changeMessage(){
    message.value = 'hello inzv520'
}
function appClick(value){
    console.log('value',value);
}
// 3.获取组件实例
const showInfoRef = ref()
onMounted(()=>{
    showInfoRef.value.foo()
})
</script>
<style scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
</style>
